import React, { Component } from 'react';
import { Form, Input, Button, Modal } from 'antd';
import CheckInput from '../../utils/checkInput/CheckInput';

class NextResetPassword extends Component {
  formRef = React.createRef();
  constructor(props) {
    super(props);
    this.state = {
      confirmDirty: false,
    };
  }

  componentDidMount() {}

  componentWillUnmount() {}

  render() {
    const layout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 16 },
    };
    return (
      <Modal
        destroyOnClose={true}
        title={'重新设置密码'}
        visible={this.props.visible}
        onCancel={this.props.onCancel}
        onOk={this.onSubmit}
      >
        <div>
          <Form
            {...layout}
            ref={this.formRef}
            autoComplete="off"
            hideRequiredMark
            className={'formCss'}
            onFinish={this.onSubmit}
          >
            <Form.Item
              name={'password'}
              label={'旧密码'}
              rules={[{ required: true, message: '旧密码不能为空!' }]}
            >
              <Input
                maxLength={16}
                type={'password'}
                placeholder="请输入密码(6-16位密码，区分大小写)"
              />
            </Form.Item>
            <Form.Item
              className={'formItem'}
              label={'新密码'}
              name={'passwordNew'}
              rules={[
                { required: true, message: '新密码不能为空!' },
                {
                  validator: this.validateToNextPassword,
                },
              ]}
            >
              <Input
                maxLength={16}
                type={'password'}
                placeholder={'请输入新密码'}
                onBlur={this.handleConfirmBlur}
              />
            </Form.Item>
            <Form.Item
              className={'formItem'}
              label={'确认新密码'}
              name={'confirm'}
              rules={[
                { required: true, message: '确认新密码不能为空!' },
                {
                  validator: this.validateToPassword,
                },
              ]}
            >
              <Input
                maxLength={16}
                type={'password'}
                placeholder={'请确认新密码'}
                onBlur={this.handleConfirmBlur}
              />
            </Form.Item>
          </Form>
        </div>
      </Modal>
    );
  }

  handleConfirmBlur = e => {
    const { value } = e.target;
    this.setState({ confirmDirty: this.state.confirmDirty || !!value });
  };

  compareToFirstPassword = (rule, value, callback) => {
    if (value && value !== this.formRef.current.getFieldValue('password')) {
      callback('两次密码不一致，请重新填写密码!');
    } else {
      callback();
    }
  };

  validateToNextPassword = (rule, value, callback) => {
    const { form } = this.props;
    if (value && value.length < 6) {
      return callback('密码的长度只能在6~18个字符之间！');
    }
    if (value && !CheckInput.checkPsw(value)) {
      return callback('密码格式有误，请重新输入！');
    }
    if (value && this.state.confirmDirty) {
      this.formRef.current.validateFields(['confirm'], { force: true });
    }
    callback();
  };

  validateToPassword = (rule, value, callback) => {
    const { form } = this.props;
    if (value && value.length < 6) {
      return callback('密码的长度只能在6~18个字符之间！');
    }
    if (value && !CheckInput.checkPsw(value)) {
      return callback('密码格式有误，请重新输入！');
    }
    callback();
  };

  onSubmit = value => {
    this.formRef.current
      .validateFields()
      .then(value => {
        this.props.callBack(value);
      })
      .catch(error => {
        console.log(error);
      });
  };
}

export default NextResetPassword;
